<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wenzhang</title>
    <link rel="stylesheet" href="/blog/private/subpage/css/AllPost.css">
</head>
<body>
<div class="container">
    <div class="header">
        <p>文章</p><a href="#">写文章</a>
    </div>
    <div class="main-content">
        <div class="nav"><a href="#">全部</a>(<p>34</p>)&nbsp;|&nbsp;</div>
        <div class="nav"><a href="#">已发布</a>(<p>27</p>)&nbsp;|&nbsp;</div>
        <div class="nav"><a href="#">草稿</a>(<p>7</p>)</div>
        <div class="search"><input type="text"><input type="button" value="搜索文章"></div>
        <div class="grep">
            <select name="article-operation">
                <option value="">批量操作</option>
                <option value="">移入回收站</option>
                <option value="">编辑</option>
            </select>
            <input type="button" value="应用">
            <select name="article-datetime">
                <option value="">全部日期</option>
            </select>
            <select name="article-classes">
                <option value="">全部分类</option>
            </select>
            <input type="button" value="筛选" >
            <div class="page-change">
                <p class="article-account">0</p>篇文章&nbsp;
                <input type="button" value="<<">
                <input type="button" value="<">
                第<input type="text">页,共<p>0</p>
                <input type="button" value=">">
                <input type="button" value=">>">
            </div>
        </div>
        <ul><li class="list-head"><input type="checkbox"><a class="biaoti" href="#">标题<img class="arr" src="/blog/private/subpage/img/arrUp.png"></a><a class="datetime" href="#">日期</a><a class="pinglun" href="#">评论</a><p>标签</p><p>分类目录</p><p class="writer">作者</p></li><li>
            <input type="checkbox">
            <strong><a href="#">(无标题)</a><span>—草稿</span>
                <p class="operation-links"><a href="#">编辑</a>&nbsp;|&nbsp;<a href="#">快速编辑</a>&nbsp;|&nbsp;<a href="#">移至回收站</a>&nbsp;|&nbsp;<a href="#">预览</a></p></strong>
            <div class="date">
                <p class="date-notice">最后修改</p>
                <p class="notice-time">2017-05-04</p>
            </div>
            <a class="comments" href="#">—</a>
            <a class="article-title"href="#">—</a>
            <a class="article-neibie" href="#">杂记</a>
            <a class="article-writer" href="#">徐延旭</a>
        </li><li>
            <input type="checkbox">
            <strong><a href="#">(无标题)</a><span>—草稿</span>
                <p class="operation-links"><a href="#">编辑</a>&nbsp;|&nbsp;<a href="#">快速编辑</a>&nbsp;|&nbsp;<a href="#">移至回收站</a>&nbsp;|&nbsp;<a href="#">预览</a></p></strong>
            <div class="date">
                <p class="date-notice">最后修改</p>
                <p class="notice-time">2017-05-04</p>
            </div>
            <a class="comments" href="#">—</a>
            <a class="article-title"href="#">—</a>
            <a class="article-neibie" href="#">杂记</a>
            <a class="article-writer" href="#">徐延旭</a>
        </li></ul>
        <div class="grep">
            <select name="article-operation" id="operation">
                <option value="">批量操作</option>
                <option value="">移入回收站</option>
                <option value="">编辑</option>
            </select>
            <input type="button" value="应用">
            <div class="page-change">
                <p class="article-account">0</p>篇文章&nbsp;
                <input type="button" value="<<">
                <input type="button" value="<">
                第<input type="text">页,共<p>0</p>
                <input type="button" value=">">
                <input type="button" value=">>">
            </div>
        </div>
    </div>
</div>
<script>

    //获取json数据
    var jsonData;var ulObj;var lis;var lisnum;
    function ajax(url,succ) {
        var aj=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP")
        aj.open("get", url, true)
        aj.send();
        aj.onreadystatechange = function() {
            if(aj.readyState == 4&&aj.status==200&&succ) {
                succ(aj.responseText)
            }
        }
    }

    ajax("/Blog/private/subpage/DB/AllPost.json", function (res) {
        jsonData = eval("(" + res + ")");

        document.getElementsByClassName("article-account")[0].innerHTML=jsonData.length;
        document.getElementsByClassName("article-account")[1].innerHTML=jsonData.length;
        ulObj=document.querySelector(".main-content ul");
        lis=ulObj.childNodes;
        lisnum=ulObj.childNodes.length;
        for (var k = 1; k <lisnum; k++) {
            ulObj.removeChild(lis[1]);
        }
        for(var i=0;i<jsonData.length;i++) {
            ulObj=document.querySelector(".main-content ul");

            var liNew = document.createElement("li");
            liNew.innerHTML = "<input type=\"checkbox\">\n" +
                "            <strong><a class=\"art-title\" href=\"#\"></a><span class=\"modifying\"></span>\n" +
                "                <p class=\"operation-links\"><a href=\"#\">编辑</a>&nbsp;|&nbsp;<a href=\"#\">快速编辑</a>&nbsp;|&nbsp;<a href=\"#\">移至回收站</a>&nbsp;|&nbsp;<a href=\"#\">预览</a></p></strong>\n" +
                "            <div class=\"date\">\n" +
                "                <p class=\"date-notice\"></p>\n" +
                "                <p class=\"notice-time\"></p>\n" +
                "            </div>\n" +
                "            <a class=\"comments\" href=\"#\"></a>\n" +
                "            <a class=\"article-title\"href=\"#\"></a>\n" +
                "            <a class=\"article-neibie\" href=\"#\"></a>\n" +
                "            <a class=\"article-writer\" href=\"#\"></a>";

            ulObj.appendChild(liNew);
            if (jsonData[i].title === "")
                ulObj.getElementsByClassName("art-title")[i].innerHTML = "(无标题)";
            else
                ulObj.getElementsByClassName("art-title")[i].innerHTML = jsonData[i].title;
            if (jsonData[i].modifying === "")
            {
                ulObj.getElementsByClassName("date-notice")[i].innerHTML = "已发布";
                ulObj.getElementsByClassName("modifying")[i].innerHTML = "";
            }
            else {
                ulObj.getElementsByClassName("date-notice")[i].innerHTML = "最后修改";
                ulObj.getElementsByClassName("modifying")[i].innerHTML = "—草稿";
            }
            ulObj.getElementsByClassName("article-writer")[i].innerHTML=jsonData[i].writer;
            ulObj.getElementsByClassName("article-neibie")[i].innerHTML=jsonData[i].classes;
            if (jsonData[i].label === "")
                ulObj.getElementsByClassName("article-title")[i].innerHTML="—";
            else
                ulObj.getElementsByClassName("article-title")[i].innerHTML=jsonData[i].label;
            if (jsonData[i].comments === "")
                ulObj.getElementsByClassName("comments")[i].innerHTML="—";
            else
                ulObj.getElementsByClassName("comments")[i].innerHTML=jsonData[i].comments;
            ulObj.getElementsByClassName("notice-time")[i].innerHTML=jsonData[i].times;
        }
    })
</script>
</body>
</html>